﻿@model RegisterViewModel
@{
  Layout = "_EmptyLayout";
}

@Html.AntiForgeryToken()
<div id="registerPage">


  <div class="registerFrom">

    <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false" ref="imgFile"
      :on-change="uploadChange">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-form ref="registerForm" :rules="registerRules" label-position="top" label-width="80px"
      v-bind:model="registerForm" size="small">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="registerForm.userName" maxlength="12" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="registerForm.nickName" maxlength="12" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="registerForm.password" show-password show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="registerForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phoneNumber">
        <el-input v-model="registerForm.phoneNumber" maxlength="11" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker type="date" placeholder="请选择您的生日" v-model="registerForm.birthday" style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="所在地">
        <el-select placeholder="请选择省份" v-model="address.province" filterable style="width: 150px;"
          v-on:change="onProvinceChange">
          <el-option v-for="item in provinces" :key="item.value+'p'" :label="item.name" :value="item">
          </el-option>
        </el-select>
        <el-select placeholder="请选择城市" v-model="address.city" filterable v-on:change="onCityChange">
          <el-option v-for="item in cities" :key="item.value+'c'" :label="item.name" :value="item">
          </el-option>
        </el-select>
        <el-select placeholder="请选择区县" v-model="address.county" filterable style="width: 170px;">
          <el-option v-for="item in counties" :key="item.value+'c1'" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="个性签名">
        <el-input type="textarea" autosize v-model="registerForm.signature"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center;">
        <el-button class="rgBtn" type="primary" v-on:click="register()">注册</el-button>
      </el-form-item>

    </el-form>
  </div>
</div>
<script>
  var vm = new Vue({
    el: '#registerPage',
    data() {
      return {
        imgTypes: ["image/png", "image/jpg", "image/jpeg", "image/gif"],
        avatarFile: {},
        imageUrl: '',
        provinces: [],
        cities: [],
        counties: [],
        registerForm: {
          userName: '',
          password: '',
          returnUrl: "",
          email: "",
          phoneNumber: "",
          signature: "",
          birthday: "",
          nickName: "",
          __RequestVerificationToken: null

        },
        address: {
          province: "",
          city: "",
          county: ""
        },
        selectProvince: {},
        selectCity: {},
        registerRules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' },
            { min: 6, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
          phoneNumber: [
            { min: 11, max: 11, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      register() {
        console.log(this.address);
        this.$refs.registerForm.validate().then((res) => {
          if (res) {
            var token = document.querySelector('token, input').getAttribute('value');
            console.log(token)
            this.registerForm.__RequestVerificationToken = token;
            var url = "@Html.Raw(@Model.ReturnUrl)";
            this.registerForm.returnUrl = url;
            console.log(url)

            let param = new FormData();
            param.append("avatar", this.avatarFile.raw);
            param.append("address", JSON.stringify(this.address));
            console.log(JSON.stringify(this.address));
            for (let key in this.registerForm) {
              param.append(key, this.registerForm[key]);
              console.log(key);
            }
            postFormData("register", param).then(res => console.log(res))

          }


        })
      },
      onProvinceChange(value) {

        console.warn(value);
        this.address.province = value.name;
        this.cities = value.children;
      },
      onCityChange(value) {
        this.address.city = value.name;
        this.counties = value.children;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },

      uploadChange(file, fileList) {

        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!this.imgTypes.some(x => x === file.raw.type)) {
          this.$message.error('请选择正确的图片格式');
          return;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return;
        }
        this.$refs.imgFile.clearFiles()
        console.log(this.$refs.imgFile);

        this.avatarFile = file;
        console.log(this.avatarFile);
        this.imageUrl = URL.createObjectURL(file.raw);;
      }
    },
    created: function () {
      get("../province.json").then(res => {
        this.provinces = res;
      });
    }



  })
</script>
<style>
  .avatar-uploader {
    text-align: center;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  #registerPage {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .registerFrom .el-form-item {
    margin-bottom: 15px;
  }

  .registerFrom {
    padding: 20px;
    opacity: 0.8;
    border-radius: 5px;
    background-color: white;
    width: 550px;
  }

  .registerFrom>h1 {
    text-align: center;
    margin-bottom: 50px;
  }

  .el-form-item__label {
    font-weight: bold;
    padding: 0px !important;
  }

  .el-checkbox__label {}
</style>
